<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>404</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta http-equiv="Access-Control-Allow-Origin" content="*">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<style>
		html, body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
		}

		body {
			display: flex;
			align-items: center; /*定义body的元素垂直居中*/
			justify-content: center; /*定义body的里的元素水平居中*/
		}

		.error .clip .shadow {
			height: 180px;
		}

		.error .clip:nth-of-type(2) .shadow {
			width: 130px;
		}

		.error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {
			width: 250px;
		}

		.error .digit {
			width: 150px;
			height: 150px;
			line-height: 150px;
			font-size: 120px;
			font-weight: bold;
		}

		.error h2 {
			font-size: 32px;
		}

		.error .msg {
			top: -190px;
			left: 30%;
			width: 80px;
			height: 80px;
			line-height: 80px;
			font-size: 32px;
		}

		.error span.triangle {
			top: 70%;
			right: 0%;
			border-left: 20px solid #535353;
			border-top: 15px solid transparent;
			border-bottom: 15px solid transparent;
		}

		.error .container-error-404 {
			height: 250px;
			padding-top: 40px;
		}

		.error .container-error-404 .clip {
			display: inline-block;
			transform: skew(-45deg);
		}

		.error .clip .shadow {
			overflow: hidden;
		}

		.error .clip:nth-of-type(2) .shadow {
			overflow: hidden;
			position: relative;
			box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150, 0.8), 20px 0px 20px -15px rgba(150, 150, 150, 0.8);
		}

		.error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after {
			content: "";
			position: absolute;
			right: -8px;
			bottom: 0px;
			z-index: 9999;
			height: 100%;
			width: 10px;
			background: linear-gradient(90deg, transparent, rgba(173, 173, 173, 0.8), transparent);
			border-radius: 50%;
		}

		.error .clip:nth-of-type(3) .shadow:after {
			left: -8px;
		}

		.error .digit {
			position: relative;
			top: 8%;
			color: white;
			background: #1E9FFF;
			border-radius: 50%;
			display: inline-block;
			transform: skew(45deg);
		}

		.error .clip:nth-of-type(2) .digit {
			left: -10%;
		}

		.error .clip:nth-of-type(1) .digit {
			right: -20%;
		}

		.error .clip:nth-of-type(3) .digit {
			left: -20%;
		}

		.error h2 {
			font-size: 24px;
			color: #A2A2A2;
			font-weight: bold;
			padding-bottom: 20px;
		}

		.error .tohome {
			font-size: 16px;
			color: #07B3F9;
		}

		.error .msg {
			position: relative;
			z-index: 9999;
			display: block;
			background: #535353;
			color: #A2A2A2;
			border-radius: 50%;
			font-style: italic;
		}

		.error .triangle {
			position: absolute;
			z-index: 999;
			transform: rotate(45deg);
			content: "";
			width: 0;
			height: 0;
		}

		@media (max-width: 767px) {
			.error .clip .shadow {
				height: 100px;
			}

			.error .clip:nth-of-type(2) .shadow {
				width: 80px;
			}

			.error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow {
				width: 100px;
			}

			.error .digit {
				width: 80px;
				height: 80px;
				line-height: 80px;
				font-size: 52px;
			}

			.error h2 {
				font-size: 18px;
			}

			.error .msg {
				top: -110px;
				left: 15%;
				width: 40px;
				height: 40px;
				line-height: 40px;
				font-size: 18px;
			}

			.error span.triangle {
				top: 70%;
				right: -3%;
				border-left: 10px solid #535353;
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
			}

			.error .container-error-404 {
				height: 150px;
			}
		}
	</style>
</head>
<body>
<div class="error">
	<div class="container-floud">
		<div style="text-align: center">
			<div class="container-error-404">
				<div class="clip">
					<div class="shadow">
						<span class="digit thirdDigit"></span>
					</div>
				</div>
				<div class="clip">
					<div class="shadow">
						<span class="digit secondDigit"></span>
					</div>
				</div>
				<div class="clip">
					<div class="shadow">
						<span class="digit firstDigit"></span>
					</div>
				</div>
				<div class="msg">OH!
					<span class="triangle"></span>
				</div>
			</div>
			<h2 class="h1">很抱歉，你访问的页面找不到了</h2>
		</div>
	</div>
</div>
<script>
	function randomNum() {
		return Math.floor(Math.random() * 9) + 1;
	}

	var loop1, loop2, loop3, time = 30, i = 0, number;
	loop3 = setInterval(function () {
		if (i > 40) {
			clearInterval(loop3);
			document.querySelector('.thirdDigit').textContent = 4;
		} else {
			document.querySelector('.thirdDigit').textContent = randomNum();
			i++;
		}
	}, time);
	loop2 = setInterval(function () {
		if (i > 80) {
			clearInterval(loop2);
			document.querySelector('.secondDigit').textContent = 0;
		} else {
			document.querySelector('.secondDigit').textContent = randomNum();
			i++;
		}
	}, time);
	loop1 = setInterval(function () {
		if (i > 100) {
			clearInterval(loop1);
			document.querySelector('.firstDigit').textContent = 4;
		} else {
			document.querySelector('.firstDigit').textContent = randomNum();
			i++;
		}
	}, time);
</script>
</body>
</html>